<template>
<div>
  <el-form :inline="true" style="float: left">
    <el-form-item>
      <el-input
          v-model="page.name"
          placeholder="名称"
          clearable
      >
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="getRole">搜索</el-button>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="saveRole" v-if="hasPerm('sys:role:save')">新增</el-button>
    </el-form-item>
    <el-form-item>
      <el-popconfirm title="确定批量删除吗？" @confirm="delsHandle">
        <el-button type="danger" slot="reference" :disabled="delBtlStatus" v-if="hasPerm('sys:role:delete')">批量删除</el-button>
      </el-popconfirm>
    </el-form-item>
  </el-form>


  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      row-key="id"
      border
      stripe
      @selection-change="handleSelectionChange">

    <el-table-column
        type="selection"
        width="55">
    </el-table-column>

    <el-table-column
        prop="name"
        label="名称"
        width="120">
    </el-table-column>


    <el-table-column
        prop="status"
        label="状态">
      <template slot-scope="scope">
        <el-tag size="small" v-if="scope.row.status === 1" type="success">正常</el-tag>
        <el-tag size="small" v-else-if="scope.row.status === 0" type="danger">禁用</el-tag>
      </template>

    </el-table-column>
    <el-table-column
        prop="icon"
        label="操作">

      <template slot-scope="scope">
        <el-button type="text" @click="permHandler(scope.row.id)" v-if="hasPerm('sys:role:menu')">分配权限</el-button>
        <el-divider direction="vertical"></el-divider>

        <el-button type="text" @click="upRole(scope.row)" v-if="hasPerm('sys:role:update')">编辑</el-button>
        <el-divider direction="vertical"></el-divider>

        <template>

            <el-button type="text" slot="reference" @click="delRole(scope.row.id)" v-if="hasPerm('sys:role:delete')">删除</el-button>

        </template>

      </template>
    </el-table-column>

  </el-table>


  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      :current-page="page.current"
      :page-size="page.size"
      :total="page.total">
  </el-pagination>

  <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="600px"
      >

    <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">

      <el-form-item label="角色名称" prop="name" label-width="100px">
        <el-input v-model="editForm.name" autocomplete="off"></el-input>
      </el-form-item>



      <el-form-item label="状态" prop="status" label-width="100px">
        <el-radio-group v-model="editForm.status">
          <el-radio :label=0>禁用</el-radio>
          <el-radio :label=1>正常</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()" v-text="editForm.id?'修改':'创建'"></el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

  <el-dialog
      title="分配权限"
      :visible.sync="permDialogVisible"
      width="600px">

    <el-form :model="permForm">

      <el-tree
          :data="permTreeData"
          show-checkbox
          ref="permTree"
          :default-expand-all=true
          node-key="id"
          :props="defaultProps">
      </el-tree>

    </el-form>

    <span slot="footer" class="dialog-footer">
			    <el-button @click="permDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="submitPermFormHandle()">确 定</el-button>
			</span>

  </el-dialog>


</div>
</template>

<script>

export default {
  name: "Role",
  data(){
    return{
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      permDialogVisible:false,
      permForm:{
        onRole:'',
        menuIds:[],
      },
      permTreeData:[
      ],
      dialogVisible:false,
      editForm:{

      },
      delBtlStatus:true,
      page:{
        current:1,
        size:10,
        total:0,
        name:'',
      },
      multipleSelection:[],
      tableData:[
      ],
      editFormRules:{
        name: [
          {required: true, message: '请输入角色名称', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    this.getRole()
    this.$axios.get('/api/sys/menu/getAllMenu').then(res=>{
      this.permTreeData=res.data.data
    })
  },
  methods:{
    saveRole(){
      this.editForm={}
      this.dialogVisible=true
    },
    delsHandle(){
      this.$axios.post('/api/sys/role/deleteRoles',this.multipleSelection).then(res=>{
        this.$message.success(res.data.msg)
      }).finally(()=>{
        this.getUserList()
      })
    },
    //更新权限信息
    submitPermFormHandle(){
      this.permForm.menuIds=this.$refs.permTree.getCheckedKeys();
      this.$axios.post('/api/sys/role/upRoleInfo/'+this.permForm.onRole,this.permForm.menuIds).then(res=>{
        if(res.data.code==200){
          this.$message.success('修改成功')
          this.permForm={}
          this.permDialogVisible=false
        }
      })
    },
    //弹出权限管理菜单
    permHandler(id){
      this.permForm.onRole='',
      this.$axios.get('/api/sys/role/getRoleInfo/'+id).then(res=>{
        this.$refs.permTree.setCheckedKeys(res.data.data);
        this.permForm.menuIds=res.data.data
        this.permForm.onRole=id
      })
      this.permDialogVisible=true
    },
    //重置菜单
    resetForm(){
      this.editForm={}
    },
    //创建or修改
    submitForm(){
      this.$refs['editForm'].validate(valid=>{
        if(valid){
          this.$axios.post('/api/sys/role/'+(this.editForm.id?'updateRole' : 'saveRole'),this.editForm).then(res=>{
            this.$message.success(res.data.msg?res.data.msg:'操作成功！')
            this.getRole()
            this.dialogVisible=false
          })
        }else{
          return false
        }
      })
    },
    //获取分页列表
    getRole(){
      let name=this.page.name?'?name='+this.page.name:''
      this.$axios.get('/api/sys/role/getAllRole/'+this.page.current+'/'+this.page.size+name).then(res=>{
        this.page.total=res.data.data.total;
        this.page.current=res.data.data.current;
        this.tableData=res.data.data.records
      })
    },
    //更改分页大小
    handleSizeChange(size){
      this.page.size=size
      this.getRole()
    },
    //更改页码
    handleCurrentChange(current){
      this.page.current=current
      this.getRole()
    },
    //复选框更改时的操作
    handleSelectionChange(val){
      this.multipleSelection = val;
      this.delBtlStatus = val.length == 0
    },
    //删除角色
    delRole(id){
      this.$confirm("确定删除该角色？","警示",{type:"warning"}).then(()=>{
        this.$axios.delete('/api/sys/role/deleteRole/'+id).then(res=> {

            this.$message.success(res.data.msg?res.data.msg:'操作成功！')

        }).finally(()=>{
          this.getRole()
        })
        }).catch(()=>{
        this.$message.info('取消操作！')
      })
    },
    //更新角色无需修改
    upRole(role){
      this.editForm=role
      this.dialogVisible=true
    },
  }
}
</script>

<style scoped>

</style>